<template>
  <div class="layui-container">
    <div class="status" v-if="isShow"> <span>你的bmi值为:{{ currentData.bmi }} 身体状态:{{ currentData.status }}</span> </div>
    <div class="layui-form-item">
      <label class="layui-form-label">身高</label>
      <div class="layui-input-inline">
        <input
            type="text"
            placeholder="请输入身高"
            v-model="formData.height" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">单位：cm</div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">体重</label>
      <div class="layui-input-inline">
        <input
            type="text"
            placeholder="请输入体重"
            v-model="formData.weight" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">单位：kg</div>
    </div>
    <button
        @click="calc"
        class="layui-btn">立即计算</button>
  </div>
</template>

<script>
export default {
  name: "CalcBmi",
  data(){
    return {
      formData:{
        height:'',
        weight:''
      },
    }
  },
  props:{
    currentData:{
      type:Object,
      default:() => ({})
    },
    isShow:{
      type:Boolean,
      default: false
    },
  },
  methods:{
    calc(){
      // console.log(this.formData)
      this.$emit('CalcBmi',this.formData)
    }
  }

}
</script>

<style scoped lang="less">
@import "~_layui@2.6.8@layui/dist/css/layui.css";



.status{
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #2AC38A;
  span{
    padding-left: 30px;
    color: white;
  }
}


</style>